<!--
 * @Author: Haochen
 * @Date: 2021-12-11 12:16:08
 * @LastEditTime: 2021-12-11 12:16:08
 * @FilePath: \students-system\src\views\classes\ClassesList.vue
-->

<template>
  <div>
    <!-- <h4>班级列表</h4>
    <select v-model="newClass.subjectsId">
      <option :value="undefined" disabled>请选择专业</option>
      <option
        v-for="subject in subjects"
        :key="subject._id"
        :value="subject._id"
      >
        {{ subject.name }}
      </option>
    </select>
    &nbsp;
    <input type="text" v-model.lazy="newClass.name" /> &nbsp;
    <button @click="addNewClass">确认新增</button><br /> -->

    <h4>搜索班级</h4>
    <el-input
      style="width=300px"
      v-model.lazy="searchData.value"
      placeholder="请输入内容"
    ></el-input>
    &nbsp;
    <el-button type="primary" @click="confirmSearch">确认搜索</el-button>
    <el-table :data="classes" border style="width: 100%">
      <el-table-column prop="subjectsId.name" label="专业名称" align="center">
      </el-table-column>
      <el-table-column prop="name" label="班级名称" align="center">
      </el-table-column>
      <el-table-column label="班级操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row._id)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="deleteTeacher(scope.row._id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <Pages
      :total="total"
      :currentPage="pageData.currentPage"
      :pageSize="pageData.pageSize"
      @prevPage="prevPage"
      @nextPage="nextPage"
      @firstPage="firstPage"
      @lastPage="lastPage"
    ></Pages>
  </div>
</template>

<script>
import Pages from "../../components/common/Pages.vue";
import bus from "../students/bus.js";

import { createNamespacedHelpers } from "vuex";
const { mapActions: classActions, mapState: classState } =
  createNamespacedHelpers("classes");
const { mapActions: subjectsActions, mapState: subjectsState } =
  createNamespacedHelpers("subjects");

export default {
  data() {
    return {
      // newClass: {},
      pageData: { currentPage: 1, pageSize: 3 },
      searchData: { value: "" },
    };
  },

  computed: {
    ...classState({
      classes: "rows",
      total: "total",
      pages: "pages",
    }),

    ...subjectsState({
      subjects: "rows",
    }),
  },
  created() {
    bus.$on("sendPageSize", (size) => {
      this.pageData.pageSize = size;
      this.pageData.currentPage = 1;
      this.getSubjects();
    });
    this.getClassesAsync({
      ...this.pageData,
      ...this.searchData,
    });
    this.getSubjectsAsync();
  },
  methods: {
    ...classActions(["getClassesAsync"]),
    ...subjectsActions(["getSubjectsAsync"]),

    // async addNewClass() {
    //   const { data: res } = await this.$api.classes.addNewClass(this.newClass);
    //   if (res.code) {
    //     alert(res.message);
    //     this.getClasses();
    //     this.newClass = {};
    //   }
    // },

    confirmSearch() {
      this.getClasses();
      this.pageData.currentPage = 1;
    },

    // * 下一页功能
    nextPage() {
      if (this.pageData.currentPage < this.pages) {
        this.pageData.currentPage++;
      }
    },

    // * 上一页功能
    prevPage() {
      if (this.pageData.currentPage > 1) {
        this.pageData.currentPage--;
      }
    },
    // * 首页功能
    firstPage() {
      this.pageData.currentPage = 1;
    },
    // * 尾页功能
    lastPage() {
      this.pageData.currentPage = this.pages;
    },
  },
  watch: {
    pageData: {
      deep: true,
      handler() {
        this.getClassesAsync({
          ...this.pageData,
          ...this.searchData,
        });
      },
    },
  },
  components: { Pages },
};
</script>

<style scoped></style>
